<template>
	<view class="ranking-container">
		<!-- 加载状态 -->
		<u-loading-page :loading="loading" iconSize="36" />

		<!-- 内容 -->
		<view class="rank-list" v-if="!loading && rankData.length > 0">
			<!-- 前三名特殊样式 -->
			<view class="top-three">
				<!-- NO.2 -->
				<view class="top-item no2" v-if="rankData[1]">
					<image :src="rankData[1].imageUrl || '@/static/images/community-avter.jpg'" mode="aspectFill">
					</image>
					<view class="rank-badge">NO.2</view>
					<view class="name">{{ rankData[1].name }}</view>
					<view class="carbon">{{ rankData[1].carbon }}kg</view>
				</view>

				<!-- NO.1 突出显示 -->
				<view class="top-item no1" v-if="rankData[0]">
					<image :src="rankData[0].imageUrl || '@/static/images/community-avter.jpg'" mode="aspectFill">
					</image>
					<view class="rank-badge">NO.1</view>
					<view class="name">{{ rankData[0].name }}</view>
					<view class="carbon">{{ rankData[0].carbon }}kg</view>
				</view>

				<!-- NO.3 -->
				<view class="top-item no3" v-if="rankData[2]">
					<image :src="rankData[2].imageUrl || '@/static/images/community-avter.jpg'" mode="aspectFill">
					</image>
					<view class="rank-badge">NO.3</view>
					<view class="name">{{ rankData[2].name }}</view>
					<view class="carbon">{{ rankData[2].carbon }}kg</view>
				</view>
			</view>

			<!-- 其余排名 (从第4名开始) -->
			<view class="other-ranks">
				<view class="rank-item" v-for="(item, index) in otherRanks" :key="index">
					<view class="rank-num">{{ item.rank }}</view>
					<image :src="item.imageUrl || '@/static/images/community-avter.jpg'" mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{ item.name }}</view>
						<view class="carbon">{{ item.carbon }}kg</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<u-empty v-if="!loading && rankData.length === 0" mode="data" iconSize="120" />
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'

	const props = defineProps({
		rankData: {
			type: Array,
			default: () => []
		},
		loading: {
			type: Boolean,
			default: false
		}
	})

	// 计算属性 - 获取第4名及以后的排名
	const otherRanks = computed(() => {
		return props.rankData.slice(3)
	})
</script>

<style lang="scss" scoped>
	.ranking-container {
		// padding: 20rpx;
		// background-color: #fff;

		.rank-list {
			.top-three {
				display: flex;
				justify-content: center;
				align-items: flex-end;
				margin-bottom: 40rpx;
				padding: 0 30rpx;
				height: 320rpx;
				position: relative;

				.top-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 200rpx;
					padding: 20rpx;
					border-radius: 16rpx;
					// background-color: #fff;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.8);

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-bottom: 10rpx;
					}

					&.no1 {
						height: 280rpx;
						margin: 0 20rpx;
						background: linear-gradient(to bottom, #FFF9E6, #fff);
						transform: translateY(1rpx);
						z-index: 2;
						border: 1px solid #FFEBA3;
						margin: 0 10rpx;

						.rank-badge {
							background-color: #FFD700;
						}
					}

					&.no2 {
						margin-right: -20rpx;
						z-index: 1;

						.rank-badge {
							background-color: #C0C0C0;
						}
					}

					&.no3 {
						margin-left: -20rpx;
						z-index: 1;

						.rank-badge {
							background-color: #CD7F32;
						}
					}

					.crown-icon {
						margin-bottom: 10rpx;
					}

					.rank-badge {
						width: 100rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: white;
					}

					.name {
						// font-weight: bold;
						margin: 10rpx 0;
						font-size: 24rpx;
						text-align: center;
					}

					.carbon {
						color: #666;
						font-size: 28rpx;
						text-align: center;
					}
				}
			}

			.other-ranks {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 0 30rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

				.rank-item {
					display: flex;
					align-items: center;
					padding: 25rpx 0;
					border-bottom: 1rpx solid #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.rank-num {
						width: 80rpx;
						text-align: center;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.info {
						flex: 1;

						.name {
							font-size: 30rpx;
							margin-bottom: 5rpx;
						}

						.carbon {
							color: #999;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>